<template>
<div>
  <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
    <el-form-item label="项目名称" prop="projectId">
      <el-select v-model="queryParams.projectId" placeholder="请选择" @change="getData">
        <el-option v-for="item in projectList"
                    :key="item.projectId"
                    :label="item.projectName"
                    :value="item.projectId">
        </el-option>
      </el-select>
    </el-form-item>
  <div ref="main" style="width: 100%; height: 700px;"></div>
  </el-form>
</div>
</template>


<script>
//引入echarts
import * as echarts from 'echarts';
import {listTotalProgress} from "@/api/prodata/totalProgress";
import {listProjectAllByUserId} from "@/api/project/project";

export default {
  name: "index",
  data() {
    return {
      //图表容器对象
      myChart: null,
      //图表各项属性
      option: null,
      projectList: [],
      // 查询参数
      queryParams: {
        projectId: null
      },
    }
  },
  created() {
    this.getProjectList();
  },
  mounted() {
    //1, 初始化图表容器
    this.myChart = echarts.init(this.$refs.main);

    //2, 图表各项属性
    this.option = {
      title: {
        text: '项目总进度',
        left: 'center'
      },
      tooltip: {
        formatter: (params) => {
          return params.name + '<br/>' + params.value + '%'
        }
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      yAxis: {
        name: '一级活动名字',
        type: 'category',
        data: []
      },
      xAxis: {
        name: '完成百分比',
        type: 'value',
        position: 'top',
        axisLine:{show: true},
        max:100,
        axisLabel: {
          formatter: '{value}%'
        }
      },
      series: [{
        data: [],
        type: 'bar',
        label:{show: true,
          position:'insideRight',
          formatter: (params) => {
            return params.value + '%'
          }
        }
      }]
    };

    //配置项
    this.myChart.setOption(this.option);
    this.getData();
  },
  methods:{
    /** 查询项目下拉列表 */
    getProjectList() {
      listProjectAllByUserId().then((r) => {
        console.log(r)
        this.projectList = r.data
          this.queryParams.projectId = r.data[0].projectId
          this.getData()
      })
    },
    getData(){
      listTotalProgress(this.queryParams)
        .then(response => {
          this.option.yAxis.data = response.data.nameList;
          this.option.series[0].data = response.data.percentList;
          this.myChart.setOption(this.option);
        })
        .catch(() => {})

    }
  }
}
</script>



<style scoped lang="scss">

</style>
